<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
    
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>基本信息页面</title>
    <link href="${pageContext.request.contextPath }/css/metro.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/metro-responsive.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/metro-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/metro-schemes.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath }/js/jquery-2.1.3.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/metro.js"></script>
    <script src="${pageContext.request.contextPath }/js/select2.min.js"></script>
    <style type="text/css">
<!--
.exampl {
  width: 840px;
  height:550px;

  position: relative;
  margin: 0 0 .625rem 0;
  background-color: #ffffff;
}
.exampl:before,
.example:after {
  display: table;
  content: "";
}
.exampl:after {
  clear: both;
}

</style>
<script>
    $(function(){
        $("#datepicker").datepicker();
        $("#datepicker2").datepicker();
        $("#datepicker3").datepicker();
    });
    $(function(){
        $("#select").select2();
    });
  /*   function $(id)
    {
        return document.getElementById(id);
    } */
    //全局变量，记录文件数；
    var fileNum=1;
    //mouseover时，把input file移到按扭上，保证点击的是file，
    function floatFile()
    {   
        $("file"+fileNum).style.posTop=event.srcElement.offsetTop;
        $("file"+fileNum).style.posLeft=event.x-$("file"+fileNum).offsetWidth/2;
    }
    function PreviewImage(imgFile) 
    { 
     var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.JPG$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;      
     if(!pattern.test(imgFile.value)) 
     { 
      alert("系统仅支持jpg/JPG/jpeg/png/gif/bmp格式的照片！");  
      imgFile.focus(); 
     } 
     else 
     { 
      var path; 
      if(document.all)//IE 
      { 
       imgFile.select(); 
       path = document.selection.createRange().text; 
       document.getElementById("imgPreview").innerHTML=""; 
       document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 
      } 
      else//FF 
      { 
       path = URL.createObjectURL(imgFile.files[0]);
       document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>"; 
      } 
     } 
    } 

</script>

</head>
<body >
   
<div class="exampl" >

 <form id="form1"  name="stuffForm"
		action="${pageContext.request.contextPath }/stuff/updateStuffInfo.action"
		method="post" enctype="multipart/form-data">
                <div class="row">
                    <div class="cell">
             <%--         <c:forEach items="${stuffs }" var="stuffinf">
                     <c:if
						test="stuffifnf.idStuff=='DQ1-1' }"> --%>
                        <div class="accordion large-heading" data-role="accordion" data-close-any="true">
                             

                            <div class="frame active">
                                <div class="heading">基本信息</div>
                                <div class="content">
     
                              
                            <!-- input[type=text] -->
                       
姓名&nbsp;<div class="input-control text"  style="width:150px">
  <input type="text" style="width:150px" maxlength="8" name="name" value="${stuff.name }" >
</div>
  &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
       <c:set var="st" value="${stuff.sex}" />
       <c:if test="${st == '男'}">
                      <label class="input-control radio small-check">
                            <input type="radio" name="" checked="checked" >
                            <span class="check"></span>
                            <span class="caption" >男</span>
                        </label>
                        <label class="input-control radio small-check">
                            <input type="radio" name="">
                            <span class="check"></span>
                            <span class="caption">女</span>
                        </label>
        </c:if>  
        <c:if test="${st == '女'}">
                       <label class="input-control radio small-check">
                             <input type="radio" name=""  >
                            <span class="check"></span>
                            <span class="caption" >男</span>
                        </label>
                        <label class="input-control radio small-check">
                            <input type="radio" name="" checked="checked" >
                            <span class="check"></span>
                            <span class="caption">女</span>
                        </label>
         </c:if> 
 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;出生日期&nbsp;&nbsp;<input type="text" name="birthday"
					value="<fmt:formatDate value='${stuff.birthday }'
							pattern='yyyy-MM-dd'/> " />
          &nbsp; &nbsp; &nbsp;
         年龄：
    <div id="imgPreview"  style="width:120px; height:160px; float:right;" >
    <c:if test="${stuff.imgsrc!=null }">
      <img src="/photo/${stuff.imgsrc }" width="100%" height="100%"   id="Insert_logo" style="background-color: #71b1d1; display:block;width:120px; height:160px;" />
     </c:if>    
    </div>
  <p> 
  </p> 
  <div class="input-control" data-role="select" >
     <label>  民族 
      <select name="nation" size="1" id="nation">
   <!-- <option value="0" selected="selected">汉族</option> -->
	<c:forEach items="${nations }" var="nation">
							<option value="${nation.idNation }" 
							<c:if test="${nation.idNation==stuff.idNation  }">selected="selected" </c:if> >${nation.name }</option>
						</c:forEach>
      </select>
      </label>
      </div>
&nbsp; &nbsp; &nbsp; 身份证号
<div class="input-control text" style="width:170px">
  <input type="text" maxlength="18" name="idcard" value="${stuff.idcard }" >
</div>    
    &nbsp;
    <div class="input-control" data-role="select" >
    <label>&nbsp; &nbsp; &nbsp;婚否
      <select name="marry" id="marry">
       <c:set var="st1" value="${stuff.marry}" />
       <c:if test="${st1 == '是'}">
        <option value="0" selected>是</option>
        <option value="1">否</option>
        </c:if>
         <c:if test="${st1 == '否'}">
        <option value="0">是</option>
        <option value="1" selected>否</option>
        </c:if>
      </select>
    </label>
    </div>
   &nbsp;  &nbsp;工号&nbsp;<div class="input-control text"  style="width:60px">
  <input type="text" style="width:60px" maxlength="7" value="${stuff.stuffnumber }"  >
</div>
<p>
</p>
  
  籍贯&nbsp;<div class="input-control text" style="width:250px" >
        <input type="text" value="${stuff.recruitment}"  />
 
   </div>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    住址&nbsp;<div class="input-control text" style="width:250px">
   
      <input type="text" value="${stuff.address }" />
    
    </div>
    &nbsp;&nbsp;
    <!-- <a href="#">

    <input type="file" value="浏览" />

</a> -->
 <div id="tt" style="position:relative;left:610px;top:-44px;">
            <button   onmouseover="floatFile()" class="button loading-pulse lighten primary">上传</button>
            
            <div id="div1">
                <div id="file1text"></div>
                <input  id="file1" name="pic_file" type="file" style="position:absolute;left:0px;top:0px;height:40px;width:80px;opacity: 0" onchange='PreviewImage(this)' >
            </div>
        </div>

 </div>
</div>
                            <div class="frame ">
                                <div class="heading">文化程度</div>
                                <div class="content">

<div class="input-control" data-role="select" >
    <label>文化程度
      <select name="degree" id="degree">
     <c:forEach items="${degress }" var="degree">
	           <option value="${degree.idDegress }" 
                 <c:if test="${degree.idDegress ==stuff.idDegress  }">selected="selected" </c:if> >${degree.name }</option>
	    </c:forEach>
      </select>
    </label>
</div>    
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 专业 &nbsp;&nbsp;<div class="input-control text" style="width:170px">
 
    <input type="text" name="profession" id="profession" value="${stuff.profession }"/>
  
  </div>
  毕业院校&nbsp;&nbsp;<div class="input-control text" style="width:170px">
    <input type="text" name="schoolname" id="schoolname"  value="${stuff.school }" />
  </div>
  <p>
  </p>
<%-- 毕业时间&nbsp;&nbsp;<div class="input-control text" id="datepicker2"  value="${stuff.school }">
    <input type="text">
    <button class="button"><span class="mif-calendar"></span></button>
    </div>  --%> 

 </div>
                            </div>
                            <div class="frame">
                                <div class="heading">所在部门</div>
                                <div class="content">
                             
    入职时间&nbsp;&nbsp;<input type="text" name="entertime"
					value="<fmt:formatDate value='${stuff.entertime }'
							pattern='yyyy-MM-dd'/> " />
  &nbsp;&nbsp;&nbsp;
  <div class="input-control" data-role="select" >
  <label>所在部门
    <select name="department" id="department" style="width:150px">
    	<c:forEach items="${departments }" var="department">
	           <option value="${department.idStuffdepartment }" 
                 <c:if test="${department.idStuffdepartment ==stuff.idStuffdepartment  }">selected="selected" </c:if> >${department.name }</option>
	    </c:forEach>
    </select>
  </label>
  </div>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <div class="input-control" data-role="select" >
  <label>岗位
    <select name="posion" id="posion">
      <option value="0">值机内场</option>
      <option value="1">值机外场</option>
    </select>
  </label>
  </div>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <div class="input-control" data-role="select" >
  <label>职务
    <select name="duty" id="duty">
   <c:forEach items="${duties }" var="duty">
	           <option value="${duty.idDuty }" 
                 <c:if test="${duty.idDuty ==stuff.idDuty  }">selected="selected" </c:if> >${duty.name }</option>
	    </c:forEach>
    </select>
  </label>
  </div>



 </div>
 </div>
                                                        <div class="frame">
                                <div class="heading">联系方式</div>
                                <div class="content">

手机号&nbsp;&nbsp;<div class="input-control text" style="width:170px">
      <input name="telephone" type="text" id="telephone" size="18" maxlength="18" value="${stuff.telphone }" />
   </div>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  
  QQ号&nbsp;&nbsp;<div class="input-control text" style="width:170px">
<input type="text" name="qq" id="qq" value="${stuff.qq }"/>
  &nbsp;&nbsp;&nbsp;
  </div>
  email&nbsp;&nbsp;<div class="input-control text" style="width:170px">
    <input type="text" name="email" id="email" value="${stuff.email }"/>
</div>
  <p>&nbsp;</p>
  <p><br />
  </p>
  <p>&nbsp;    </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>

                                </div>
                            </div>
                          
                        </div>
                 
                    </div>

                </div>
                <input type="hidden" name="idStuff" value="${stuff.idStuff }" />
 <input type="submit" value="保存" />
                </form> 
            </div>
         <!-- End example -->
             
</body>
</html>